<template>
  <div class="index-container">
    <el-row :gutter="20">
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-alert :closable="false">
          <div style="display: flex; align-items: center; justify-content: center">
            <el-date-picker
              :picker-options="{ firstDayOfWeek: 1 }"
              v-model="currentWeek"
              type="week"
              format="yyyy 第 WW 周"
              value-format="yyyy-MM-dd"
              placeholder="选择周"
              @change="handleChange"
              :clearable="false"
            />
            <el-button type="primary" @click="handleAdd('wordOrderEdit')" style="margin-left: 10px">新增工单</el-button>
          </div>
        </el-alert>
      </el-col>
      <el-col :lg="12" :md="12" :sm="24" :xl="12" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span style="font-weight: 600">工单统计图</span>
          </div>
          <vab-chart autoresize :option="gdtj" style="height: 158px" />
        </el-card>
      </el-col>

      <el-col v-for="(item, index) in iconList" :key="index" :lg="3" :md="3" :sm="6" :xl="3" :xs="12">
        <el-card class="icon-panel" shadow="hover" v-if="item.disabled">
          <vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
          <p style="color: #ddd">{{ item.title }}</p>
        </el-card>
        <router-link :to="item.link" v-else>
          <el-card class="icon-panel" shadow="hover">
            <vab-icon :icon="['fas', item.icon]" :style="{ color: item.color }" />
            <p>{{ item.title }}</p>
          </el-card>
        </router-link>
      </el-col>

      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card class="card" shadow="never">
          <div slot="header">
            <span style="font-weight: 600">工单统计</span>
          </div>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">
                <span>本周合计</span>
              </div>
              <el-descriptions class="margin-top" :column="1" border style="padding-bottom: 76px">
                <el-descriptions-item>
                  <template slot="label">总工单数</template>
                  {{ totalBar.totalWeekBeforeNoFinishAllNum + totalBar.totalWeekAllNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周前遗留工单</template>
                  {{ totalBar.totalWeekBeforeNoFinishAllNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">新工单</template>
                  {{ totalBar.totalWeekAllNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周完成量</template>
                  {{ totalBar.totalWeekAllFinishNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">完成率</template>
                  {{
                    totalBar.totalWeekBeforeNoFinishAllNum + totalBar.totalWeekAllNum &&
                    ((totalBar.totalWeekAllFinishNum / (totalBar.totalWeekBeforeNoFinishAllNum + totalBar.totalWeekAllNum)) * 100).toFixed(
                      2
                    )
                  }}%
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">一部</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template slot="label">本周新工单数</template>
                  {{ departmentBar.oneNum.totalWeekNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周共完成数</template>
                  {{ departmentBar.oneNum.totalWeekFinishNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">二部</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template slot="label">本周新工单数</template>
                  {{ departmentBar.twoNum.totalWeekNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周共完成数</template>
                  {{ departmentBar.twoNum.totalWeekFinishNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">三部</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template slot="label">本周新工单数</template>
                  {{ departmentBar.threeNum.totalWeekNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周共完成数</template>
                  {{ departmentBar.threeNum.totalWeekFinishNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">下位机</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template slot="label">本周新工单数</template>
                  {{ departmentBar.lowerMachineNum.totalWeekNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周共完成数</template>
                  {{ departmentBar.lowerMachineNum.totalWeekFinishNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
          <el-col :lg="6" :md="6" :sm="6" :xl="6" :xs="6">
            <el-card shadow="always">
              <div slot="header">公共创新</div>
              <el-descriptions class="margin-top" :column="1" border>
                <el-descriptions-item>
                  <template slot="label">本周新工单数</template>
                  {{ departmentBar.innovationNum.totalWeekNum }}
                </el-descriptions-item>
                <el-descriptions-item>
                  <template slot="label">本周共完成数</template>
                  {{ departmentBar.innovationNum.totalWeekFinishNum }}
                </el-descriptions-item>
              </el-descriptions>
            </el-card>
          </el-col>
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="never">
          <div slot="header">
            <span style="font-weight: 600">客户新增需求工单汇总</span>
          </div>
          <el-table :data="WordOrderListByCustomerDemand" stripe style="width: 100%">
            <el-table-column label="序号" show-overflow-tooltip width="95">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="costNumber" label="费用号"></el-table-column>
            <el-table-column prop="projectName" label="项目名称"></el-table-column>
            <el-table-column prop="workContent" label="工单内容"></el-table-column>
            <el-table-column prop="departmentName" label="部门"></el-table-column>
            <el-table-column prop="executUserName" label="执行人"></el-table-column>
            <el-table-column prop="expectedCompletionTime" label="预计完成时间"></el-table-column>
            <el-table-column prop="versionNumber" label="版本号"></el-table-column>
            <el-table-column prop="isSign" label="是否签字">
              <template slot-scope="scope">
                {{ scope.row.isSign == 1 ? '是' : scope.row.isSign == 2 ? '否' : '' }}
              </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row, 'orderNew')" type="text" size="small">编辑</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="never">
          <div slot="header" style="display: flex">
            <span style="font-weight: 600; flex: 1">夹具机标准版代码开发合并情况</span>
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd('fixtureMachines')" size="mini">添加</el-button>
          </div>
          <el-table :data="fixtureMachineList" stripe style="width: 100%">
            <el-table-column label="序号" show-overflow-tooltip width="95">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="functionType" label="功能类型"></el-table-column>
            <el-table-column prop="functionContent" label="功能内容"></el-table-column>
            <el-table-column prop="devUserName" label="开发人"></el-table-column>
            <el-table-column prop="versionNumber" label="版号"></el-table-column>
            <el-table-column prop="isMerge" label="是否合并">
              <template slot-scope="scope">
                {{ scope.row.isMerge == 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column prop="mergeSha1" label="合并SHA1号"></el-table-column>
            <el-table-column prop="mergeUserName" label="合并人"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row, 'fixtureMachines')" type="text" size="small">编辑</el-button>
                <el-button @click="handleDelete(scope.row, 'fixtureMachines')" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
      <el-col :lg="24" :md="24" :sm="24" :xl="24" :xs="24">
        <el-card shadow="never">
          <div slot="header" style="display: flex">
            <span style="font-weight: 600; flex: 1">单机类标准版代码合并情况：共合并*次</span>
            <el-button icon="el-icon-plus" type="primary" @click="handleAdd('singleMachine')" size="mini">添加</el-button>
          </div>
          <el-table :data="singleMachineList" stripe style="width: 100%">
            <el-table-column label="序号" show-overflow-tooltip width="95">
              <template #default="scope">
                {{ scope.$index + 1 }}
              </template>
            </el-table-column>
            <el-table-column prop="functionType" label="功能类型"></el-table-column>
            <el-table-column prop="functionContent" label="功能内容"></el-table-column>
            <el-table-column prop="devUserName" label="开发人"></el-table-column>
            <el-table-column prop="versionNumber" label="版号"></el-table-column>
            <el-table-column prop="isMerge" label="是否合并">
              <template slot-scope="scope">
                {{ scope.row.isMerge == 1 ? '是' : '否' }}
              </template>
            </el-table-column>
            <el-table-column prop="mergeSha1" label="合并SHA1号"></el-table-column>
            <el-table-column prop="mergeUserName" label="合并人"></el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
              <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row, 'singleMachine')" type="text" size="small">编辑</el-button>
                <el-button @click="handleDelete(scope.row, 'singleMachine')" type="text" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>
    <order-new ref="orderNew" @fetchData="fetchData" />
    <wordOrder-edit ref="wordOrderEdit" @fetchData="fetchData" />
    <fixture-machines ref="fixtureMachines" @fetchDataFixtureMachine="fetchDataFixtureMachine" />
    <single-machine ref="singleMachine" @fetchDataSingleMachine="fetchDataSingleMachine" />
  </div>
</template>

<script>
  import VabChart from '@/plugins/echarts'
  import {
    getSingleMachineStandardList,
    deleteSingleMachineStandard,
    getFixtureMachinesList,
    deleteFixtureMachines,
    getWorkOrderListCustomerDemand,
    getWorkOrderTotalBarByDepartmentId,
    getWorkOrderTotalBarAll,
  } from '@/api/wordOrder'
  import FixtureMachines from './components/FixtureMachines'
  import WordOrderEdit from './components/WordOrderEdit'
  import OrderNew from './components/OrderNew'
  import SingleMachine from './components/SingleMachine'
  export default {
    name: 'Index',
    components: {
      VabChart,
      FixtureMachines,
      WordOrderEdit,
      SingleMachine,
      OrderNew,
    },
    data() {
      return {
        currentWeek: '',
        startDate: '',
        endDate: '',
        totalBar: {
          totalWeekBeforeNoFinishAllNum: '',
          totalWeekAllNum: '',
          totalWeekAllFinishNum: '',
        },
        departmentBar: {
          oneNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          twoNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          threeNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          lowerMachineNum: { totalWeekNum: '', totalWeekFinishNum: '' },
          innovationNum: { totalWeekNum: '', totalWeekFinishNum: '' },
        },
        WordOrderListByCustomerDemand: [],
        fixtureMachineList: [],
        singleMachineList: [],
        //工单统计图
        xData: [0, 0, 0, 0, 0],
        yData: [0, 0, 0, 0, 0],
        gdtj: {
          title: {},
          color: ['#4ECB73', '#FBD437'],
          tooltip: {
            trigger: 'axis',
          },
          grid: {
            top: '5%',
            left: '0%',
            right: '0%',
            bottom: '0%',
            containLabel: true,
          },
          // legend: {
          //   x: 'left',
          //   y: 'center',
          //   orient: 'vertical',
          // },
          toolbox: {
            show: false,
            feature: {
              mark: { show: true },
              dataView: { show: true, readOnly: false },
              magicType: { show: true, type: ['line', 'bar'] },
              restore: { show: true },
              saveAsImage: { show: true },
            },
          },
          calculable: false,
          xAxis: [
            {
              type: 'category',
              data: ['一部', '二部', '三部', '下位机', '公共创新'],
            },
          ],
          yAxis: [
            {
              type: 'value',
              minInterval: 1,
            },
          ],
          series: [
            {
              name: '本周新增',
              type: 'bar',
              data: [0, 0, 0, 0, 0],
            },
            {
              name: '本周完成',
              type: 'bar',
              data: [0, 0, 0, 0, 0],
            },
          ],
        },
        //卡片图标
        iconList: [
          {
            icon: 'th-list',
            title: '工单合计',
            link: '/workList/all',
            color: '#4ECB73',
          },
          {
            icon: 'table',
            title: '一部',
            link: '/workList/one',
            color: '#ffc069',
          },
          {
            icon: 'laptop-code',
            title: '二部',
            link: '/workList/two',
            color: '#5cdbd3',
          },
          {
            icon: 'coffee',
            title: '三部',
            link: '/workList/three',
            color: '#b37feb',
          },
          {
            icon: 'tools',
            title: '下位机',
            link: '/workList/lowerMachine',
            color: '#69c0ff',
          },
          {
            icon: 'lightbulb',
            title: '公共创新',
            link: '/workList/innovation',
            color: '#ff85c0',
          },
          {
            icon: 'chart-bar',
            title: '报表',
            link: '/workList/reportforms',
            color: '#b8860b',
          },
        ],
      }
    },
    created() {
      const { getMondayAndSundayOfCurrentWeek } = require('@/utils/index')
      const { monday, sunday } = getMondayAndSundayOfCurrentWeek()
      this.currentWeek = monday
      this.startDate = monday
      this.endDate = sunday
      this.init()
    },
    beforeDestroy() {},
    methods: {
      init() {
        this.fetchData()
        this.fetchBarData()
        this.fetchBarByDepartmentData()
        this.fetchDataFixtureMachine()
        this.fetchDataSingleMachine()
      },
      updateCharts() {
        this.gdtj.series[0].data = []
        this.gdtj.series[1].data = []
        this.gdtj.series[0].data = this.xData
        this.gdtj.series[1].data = this.yData
      },
      getNewDay(dateTemp, days) {
        var dateTemp = dateTemp.split('-')
        var nDate = new Date(dateTemp[1] + '-' + dateTemp[2] + '-' + dateTemp[0]) //转换为MM-DD-YYYY格式
        var millSeconds = Math.abs(nDate) + days * 24 * 60 * 60 * 1000
        var rDate = new Date(millSeconds)
        var year = rDate.getFullYear()
        var month = rDate.getMonth() + 1
        if (month < 10) month = '0' + month
        var date = rDate.getDate()
        if (date < 10) date = '0' + date
        return year + '-' + month + '-' + date
      },
      handleChange(e) {
        let d = new Date(e)
        d.setDate(d.getDate() - 1)
        let year = d.getFullYear()
        let month = (d.getMonth() + 1).toString().padStart(2, '0')
        let date = d.getDate().toString().padStart(2, '0')
        this.currentWeek = year + '-' + month + '-' + date
        this.startDate = this.currentWeek
        this.endDate = this.getNewDay(this.currentWeek, 6)
        this.init()
      },
      async fetchBarData() {
        const res = await getWorkOrderTotalBarAll({
          startDate: this.startDate,
          endDate: this.endDate,
        })
        this.totalBar = res.data
      },
      async fetchBarByDepartmentData() {
        const res1 = await getWorkOrderTotalBarByDepartmentId({
          startDate: this.startDate,
          endDate: this.endDate,
          departmentId: 1,
        })
        this.departmentBar.oneNum = res1.data
        this.xData[0] = res1.data.totalWeekNum
        this.yData[0] = res1.data.totalWeekFinishNum
        const res2 = await getWorkOrderTotalBarByDepartmentId({
          startDate: this.startDate,
          endDate: this.endDate,
          departmentId: 2,
        })
        this.departmentBar.twoNum = res2.data
        this.xData[1] = res2.data.totalWeekNum
        this.yData[1] = res2.data.totalWeekFinishNum
        const res3 = await getWorkOrderTotalBarByDepartmentId({
          startDate: this.startDate,
          endDate: this.endDate,
          departmentId: 3,
        })
        this.departmentBar.threeNum = res3.data
        this.xData[2] = res3.data.totalWeekNum
        this.yData[2] = res3.data.totalWeekFinishNum
        const res4 = await getWorkOrderTotalBarByDepartmentId({
          startDate: this.startDate,
          endDate: this.endDate,
          departmentId: 4,
        })
        this.departmentBar.lowerMachineNum = res4.data
        this.xData[3] = res4.data.totalWeekNum
        this.yData[3] = res4.data.totalWeekFinishNum
        const res5 = await getWorkOrderTotalBarByDepartmentId({
          startDate: this.startDate,
          endDate: this.endDate,
          departmentId: 5,
        })
        this.departmentBar.innovationNum = res5.data
        this.xData[4] = res5.data.totalWeekNum
        this.yData[4] = res5.data.totalWeekFinishNum
        this.updateCharts()
      },
      async fetchData() {
        const res = await getWorkOrderListCustomerDemand({
          startDate: this.startDate,
          endDate: this.endDate,
        })
        this.WordOrderListByCustomerDemand = res.data
      },
      async fetchDataFixtureMachine() {
        const res = await getFixtureMachinesList()
        this.fixtureMachineList = res.data
      },
      async fetchDataSingleMachine() {
        const res = await getSingleMachineStandardList()
        this.singleMachineList = res.data
      },
      handleAdd(type) {
        this.$refs[type].showEdit()
      },
      handleEdit(row, type) {
        this.$refs[type].showEdit(row)
      },
      handleDelete(row, type) {
        this.$baseConfirm('你确定要删除当前项吗', null, async () => {
          if (type == 'fixtureMachines') {
            await deleteFixtureMachines({ id: row.id })
          }
          if (type == 'singleMachine') {
            await deleteSingleMachineStandard({ id: row.id })
          }
          this.$baseMessage('删除成功', 'success')
          this.fetchDataFixtureMachine()
          this.fetchDataSingleMachine()
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .index-container {
    padding: 0 !important;
    margin: 0 !important;
    background: #f5f7f8 !important;

    ::v-deep {
      .el-alert {
        padding: $base-padding;

        &--info.is-light {
          min-height: 82px;
          padding: $base-padding;
          margin-bottom: 15px;
          color: #909399;
          background-color: $base-color-white;
          border: 1px solid #ebeef5;
        }
      }

      .el-card__body {
        .echarts {
          width: 100%;
          height: 115px;
        }
      }
    }

    .card {
      ::v-deep {
        .el-card__body {
          .echarts {
            width: 100%;
            height: 305px;
          }
        }
      }
    }

    .bottom {
      padding-top: 20px;
      margin-top: 5px;
      color: #595959;
      text-align: left;
      border-top: 1px solid $base-border-color;
    }

    .table {
      width: 100%;
      color: #666;
      border-collapse: collapse;
      background-color: #fff;

      td {
        position: relative;
        min-height: 20px;
        padding: 9px 15px;
        font-size: 14px;
        line-height: 20px;
        border: 1px solid #e6e6e6;

        &:nth-child(odd) {
          width: 20%;
          text-align: right;
          background-color: #f7f7f7;
        }
      }
    }

    .icon-panel {
      height: 117px;
      text-align: center;
      cursor: pointer;

      svg {
        font-size: 40px;
      }

      p {
        margin-top: 10px;
      }
    }

    .bottom-btn {
      button {
        margin: 5px 10px 15px 0;
      }
    }
  }
</style>
